<style lang="scss">
  @import "~@/styles/base";

  .page {
    height: 100vh;
    .page-bind {
      background-color: #fff;
      border-radius: rpx(10);
      min-height: rpx(1168);
      .tutorial {
        margin-top: rpx(30);
        margin-left: rpx(35);
        width: rpx(632);
        height: rpx(650);
      }
      .tip {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: rpx(65);
        font-size: rpx(32);
        line-height: rpx(40);
        color: $black;
        img {
          margin-left: rpx(10);
          margin-right: rpx(10);
          width: rpx(70);
          height: rpx(70);
        }
      }
      .wifi-status {
        display: flex;
        align-items: center;
        margin: rpx(85) auto;
        justify-content: center;
        width: rpx(260);
        height: rpx(52);
        font-size: rpx(24);
        color: $light-black;
        border: rpx(1) solid $light-black;
        box-shadow: 0 rpx(2) rpx(5) rgba(177, 187, 198, 0.32);
        border-radius: rpx(26);
        .point {
          margin-right: rpx(26);
          width: rpx(8);
          height: rpx(8);
          border-radius: rpx(4);
          background-color: $light-black;
        }
        &.active {
          border-color: $main-color;
          box-shadow: 0 rpx(2) rpx(5) rgba(92, 163, 241, 0.32);
          color: $main-color;
          .point {
            background-color: $main-color;
          }
        }
      }
    }
  }
</style>
<template>
  <div class="page">
    <div class="page-bind">
      <img class="tutorial" mode="widthFix" src="/static/img/bind/tutorial_img.png">
      <div class="tip">长按<img mode="widthFix" src="/static/img/bind/wificon.png">3秒以上进入联网状态</div>
      <div class="wifi-status" @click="changeStatus" :class="{active: isConnected}">
        <span class="point"></span>WiFi灯已闪烁
      </div>
      <div class="btn" @click="toNext">下一步</div>
    </div>
  </div>
</template>

<script>
  import wx from "utils/wx";

  export default {
    data() {
      return {
        isConnected: false
      };
    },
    components: {},
    methods: {
      changeStatus() {
        this.isConnected = !this.isConnected;
      },
      toNext() {
        //if (!this.isConnected) {
        //  wx.showToast("请确认黄灯已闪烁");
        //  return false;
        //}
        wx.navigateTo({
          url: "/bind/pages/step2/main"
        });
      }
    },
    async onShow() {
    }
  };
</script>
